*{
    margin: 0;
    padding: 0;
    list-style: none;
}
 body{
    background: url(images/back.jpeg) ;
    background-size:cover;
    background-position: center center;
} 
.xq{
    width: 32.5px;
    height: 32.5px;
    border-radius: 50%;
    border: 1.5px solid black;
    line-height: 32.5px;
    font-size: 17px;
    text-align: center;
    position: absolute;
    font-weight: 600;
    background: rgb(155, 155, 155);
    z-index: 3;
    cursor: pointer;
    transition: .5s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
button{
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.red{
    color: rgb(138, 10, 10);
}
.green{
    color: rgb(12, 80, 12);
}
#app{
    position: relative;
    width: 358px;
    height: 400px;
    margin: -10px auto;
    border: 2px solid rgb(95, 91, 91);
    background-image: url(./images/qipan.jpg);
    transform: scale(.9);
}
h1{
	text-align: center;
	color: #ffffff;
	font-family: '幼圆';
	line-height: 50px;
}
.xq_read{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* border: 3px solid black; */
    text-align: center;
    position: absolute;
    font-weight: 600;
    /* background: rgb(36, 36, 36); */
    cursor: pointer;
}
.begin{
    transform: scale(1.2);
}
@keyframes round{
    0%{
        transform: translateX(0px) translateY(0px);
        box-shadow: -5px 0px 4px 0 rgb(235 10 28);
    }
    25%{
        transform: translateX(350px) translateY(0px);
        box-shadow: 0px -5px 4px 0 rgb(235 10 28)
    }
    50%{
        transform: translateX(350px) translateY(395px);
        box-shadow: 5px 0px 4px 0 rgb(235 10 28)
    }
    75%{
        transform: translateX(0px) translateY(395px);
        box-shadow: 0px 5px 4px 0 rgb(235 10 28)
    }
    100%{
        transform: translateX(0px) translateY(0px);
        box-shadow: -5px 0px 4px 0 rgb(235 10 28);
    
    }
}
@keyframes roundGreen{
    0%{
        transform: translateX(0px) translateY(0px);
        box-shadow: -5px 0px 4px 0 rgb(21, 172, 8);
    }
    25%{
        transform: translateX(353px) translateY(0px);
        box-shadow: 0px -5px 4px 0 rgb(21, 172, 8);
    }
    50%{
        transform: translateX(353px) translateY(395px);
        box-shadow: 5px 0px 4px 0 rgb(21, 172, 8);
    }
    75%{
        transform: translateX(0px) translateY(395px);
        box-shadow: 0px 5px 4px 0 rgb(21, 172, 8);
    }
    100%{
        transform: translateX(0px) translateY(0px);
        box-shadow: -5px 0px 4px 0 rgb(21, 172, 8);
    }
}
.gin{
    animation: round 7s infinite  running; 
    box-shadow: 0px 2px 4px 0 rgb(235, 10, 28);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(228, 48, 48); 
}
.gin2{
    animation: roundGreen 7s infinite  running; 
    box-shadow: 0px 2px 4px 0 rgb(21, 172, 8);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(21, 172, 8);
}
h2{
	position: absolute;
	bottom: -60px;
	left: 50%;
	color: #ffffff ;
	font-size: 20px;
	font-family: '幼圆';
	transform: translateX(-50%);
}
.but{
	position: absolute;
	padding: 7px;
	bottom: -120px;
	left: 50%;
	color: #000000 ;
	font-weight: 600;
	transform: translateX(-50%);
	border-radius: 20%;
	outline: none;
	
}
.but2{
	position: absolute;
	padding: 7px;
	bottom: -160px;
	left: 50%;
	color: #000000 ;
	font-weight: 600;
	transform: translateX(-50%);
	border-radius: 20%;
	outline: none;
}
.but3{
	position: absolute;
	padding: 7px;
	bottom: -160px;
	left: 10%;
	color: #000000 ;
	font-weight: 600;
	transform: translateX(-50%);
	border-radius: 20%;
	outline: none;
	
}
.but4{
	position: absolute;
	padding: 7px;
	bottom: -160px;
	right: -15%;
	color: #000000 ;
	font-weight: 600;
	transform: translateX(-50%);
	border-radius: 20%;
	outline: none;
}